<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script lang="ts">
import echarts, { EChartOption } from 'echarts'
import { Component, Prop, Watch } from 'vue-property-decorator'
import { mixins } from 'vue-class-component'
import ResizeMixin from '@/components/Charts/mixins/resize'

export interface ILineChartData {
  dateRange: number
  data: number[]
}

@Component({
  name: 'dashboardLine'
})
export default class extends mixins(ResizeMixin) {
  @Prop({ required: true }) private chartData!: any
  @Prop({ default: 'chart' }) private className!: string
  @Prop({ default: '100%' }) private width!: string
  @Prop({ default: '480px' }) private height!: string

  @Watch('chartData', { deep: true })
  private onChartDataChange(value: ILineChartData) {
    this.setOptions(value)
  }
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  }
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  }

  private initChart() {
    this.chart = echarts.init(this.$el as HTMLDivElement)
    this.setOptions(this.chartData)
  }

  private setOptions(chartData: any) {
    if (this.chart) {
      this.chart.clear()
      this.chartData.color = [
        '#F4D761',
        '#3973F6',
        '#7844D7',
        '#DF6C7D',
        '#34A6D2',
        '#eb3a53'
      ]
      this.chartData.grid = {
        left: '3%',
        right: '4%',
        bottom: '15%',
        containLabel: true
      }
      this.chartData.grid = {
        left: '3%',
        right: '4%',
        bottom: '15%',
        containLabel: true
      }
      this.chart.setOption(
        // {
        //   title: chartData.title,
        //   color: [
        //     '#F4D761',
        //     '#3973F6',
        //     '#7844D7',
        //     '#DF6C7D',
        //     '#34A6D2',
        //     '#eb3a53'
        //   ],
        //   tooltip: chartData.tooltip,
        //   legend: chartData.legend,
        //   grid: {
        //     left: '3%',
        //     right: '4%',
        //     bottom: '15%',
        //     containLabel: true
        //   },
        //   xAxis: chartData.xAxis,
        //   yAxis: {
        //     type: 'value',
        //     axisLine: {
        //       show: false
        //     },
        //     axisTick: {
        //       show: false
        //     },
        //     axisLabel: {
        //       show: true,
        //       textStyle: {
        //         color: '#fff'
        //       }
        //     }
        //   },
        //   series: chartData.series
        // }
        chartData as EChartOption<EChartOption.SeriesLine>,
        true
      )
    }
  }
}
</script>
